<template>
    <div class="app-container">
    <!-- 搜索条件 -->
    <el-form :inline="true" class="demo-form-inline">

        <el-form-item>
        <el-button type="success" @click="handleButton1">中午打卡</el-button>
        <el-button type="success" @click="handleButton2">下午打卡</el-button>
      </el-form-item>


        <el-form-item label="开始日期">
        <el-date-picker
          v-model="searchParams.begin"
          type="date"
          placeholder="开始日期"
          value-format="yyyy-MM-dd" 
        ></el-date-picker>
      </el-form-item>


      <el-form-item label="结束日期">
        <el-date-picker
          v-model="searchParams.end"
          type="date"
          placeholder="结束日期"
          value-format="yyyy-MM-dd" 
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>

     <!-- 出勤统计数据展示 -->
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>本月出勤统计</span>
      </div>
      <div class="text item">
        正常出勤：{{ work.proper }}
      </div>
      <div class="text item">
        迟到：{{ work.late }}
      </div>
      <div class="text item">
        早退：{{ work.early }}
      </div>
      <div class="text item">
        迟到且早退：{{ work.lateAndEarly }}
      </div>
      <div class="text item">
        旷工：{{ work.absenteeism }}
      </div>
    </el-card>
      
        <!-- 分页 -->
      <el-table
        :data="pageTicket"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名称"
        >
        </el-table-column>
        <el-table-column
          prop="morning"
          label="上午"
          :formatter="dateTimeFormat"
        >
        </el-table-column>
        <el-table-column
          prop="afternoon"
          label="下午"
          :formatter="dateTimeFormat"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态名称"
          :formatter="formatStatus"
        >
        </el-table-column>


      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { selectPage,morningClock,afterClock,getAll } from '@/api/clock';
  import dayjs from 'dayjs';
  
  export default {
    data() {
      return {
        pageTicket: [], // 分页后的当前页数据
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页行数
        total: 0, // 总数据条数

        searchParams: {
        begin: '',
        end:'',
      },
    //   本月出勤统计数据
    work:{
        proper:null,
        late:null,
        early:null,
        lateAndEarly:null,
        absenteeism:null
    },
      // 添加状态映射
      statusMap: {
        0: '正常',
        1: '迟到',
        2: '早退',
        3: '迟到还早退',
        4: '旷工'
      }

      };
    },
    methods: {
    getAll0(){
        getAll().then((res)=>{
            console.log(res.data.early)
            this.work=res.data
        })
    },
            // 按钮1的事件处理器
    handleButton1() {
      // 实现按钮1的功能
      console.log('中午打卡');
      morningClock()
      // 可以在这里调用其他方法或执行其他操作
    },

    // 按钮的事件处理器
    handleButton2() {
      // 实现按钮2的功能
      afterClock()
      console.log('下午打卡');
      // 可以在这里调用其他方法或执行其他操作
    },
    // 新增状态格式化方法
    formatStatus(row, column, cellValue) {
      return this.statusMap[cellValue] || '未知状态';
    },
        dateTimeFormat(row, column, cellValue) {
    if (!cellValue) return '-';
    return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss');
    // 或者只显示日期：dayjs(cellValue).format('YYYY-MM-DD')
  },
        
      stateList0(){
      selectStateList().then((response)=>{
        this.stateList=response.data
      }).catch(error=>console.error('Error fetching stateList data:', error))},
      // 获取分页数据
      getPageInfo() {
        const params = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          // ...其他可能需要的参数
            begin:this.searchParams.begin,
            end:this.searchParams.end
        };
        selectPage(params).then(response => {
          this.pageTicket = response.data.records; // 假设后端返回的数据中包含items字段
          this.total = response.data.total; // 假设后端返回的数据中包含total字段
        }).catch(error => {
          console.error('Error fetching page data:', error);
          // 处理错误情况
        });
      
      
    },
      // 搜索
      handleSearch() {
      this.currentPage = 1; // 重置当前页码
      this.getPageInfo(); // 重新获取数据
    },
      // 分页时修改每页的行数
      handleSizeChange(size) {
        this.pageSize = size;
        this.getPageInfo();
      },
      // 分页调整当前的页码
      handleCurrentChange(pageNumber) {
        this.currentPage = pageNumber;
        this.getPageInfo();
      },


    
    },
    mounted() {
        this.getAll0()
      this.getPageInfo();

    }
  };
  </script>
  